<template>
	<view class="team-detail bg-primary box relative" :style="statusBarHeightStyle">
		<view class="header-wrap">
			<image class="header-img" src="https://20250520wtjsq.xinyunweb.com/uploads/images/20250803/202508032313595dc6c6049.png" mode="aspectFill">
			</image>
			<view class="custom-navbar">
				<image @click="handleBack" src="/static/icon/chevron-_left_white.png" mode="aspectFill"
					class="back-icon"></image>
				<text class="header-title">详情</text>
			</view>
			<view class="userinfo-box">
				<image :src="userDetail.avatar" mode="aspectFill" class="user-avatar"></image>
				<view class="user-details">
					<text class="user-name">{{ userDetail.nickname || ""}}</text>
					<text class="user-desc-text">加入时间：{{ userDetail.create_time || ""}}</text>
					<text class="user-desc-text">手机号：{{userDetail.mobile || ''}}</text>
					<text class="user-desc-text">所在区：{{ userDetail.shouhuo_address || ""}}</text>
					<text class="user-desc-text">邀请人：{{ userDetail.f_guanjia_nickname || ""}}</text>
				</view>
			</view>
		</view>
		<view class="user-chart">
			<view class="chart-item">
				<text class="chart-value">{{ userDetail.tihuo_num || 0}}</text>
				<text class="chart-label">剩余开单量</text>
			</view>
			<view class="item-line"></view>
			<view class="chart-item">
				<text class="chart-value">{{ userDetail.zhaoshang_num || 0 }}</text>
				<text class="chart-label">招商总数</text>
			</view>
			<view class="item-line"></view>
			<view class="chart-item">
				<text class="chart-value">{{ userDetail.shebei_num || 0 }}</text>
				<text class="chart-label">设备总数</text>
			</view>
		</view>
		<view class="table-box" v-if="userDetail.five_month_list && userDetail.five_month_list.length">
			<view class="table-title">
				<text>近5个月业绩</text>
			</view>
			<view class="table-wrap">
				<view class="table-row-item is-header">
					<view class="table-col-item">
						<text>月份</text>
					</view>
					<view class="table-col-item">
						<text>招商数</text>
					</view>
					<view class="table-col-item">
						<text>开单数</text>
					</view>
				</view>
				<view class="table-row-item" v-for="(item,index) in userDetail.five_month_list" :key="index">
					<view class="table-col-item">
						<text>{{ item.month }}</text>
					</view>
					<view class="table-col-item">
						<text>{{ item.zhaoshang_num || 0 }}</text>
					</view>
					<view class="table-col-item">
						<text>{{ item.kaidan_num || 0 }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import mixin from "@/mixins/mixin.js"
	import { request, showLoading } from "@/utils/tool"
	export default {
		mixins: [mixin],
		onLoad(ev) {
			const { id } = ev
			if (id) {
				this.id = id
				this.initData(id)
			}
		},
		methods: {
			handleBack() {
				uni.navigateBack()
			},
			async initData(id) {
				const hide = showLoading("正在获取")
				const resp = await request({
					url: "/team/userdetail",
					method: "GET",
					data: {
						user_id: id
					}
				}).finally(hide)
				if (!resp.data.five_month_list) resp.data.five_month_list = []
				this.userDetail = resp.data
				console.log(resp.data, 'resp.data');
			}
		},
		data() {
			return {
				id: "",
				userDetail: {
					avatar: "",
					nickname: "",
					create_time: "",
					mobile: "",
					zhaoshang_num: 0,
					shebei_num: 0,
					tihuo_num: 0,
					five_month_list: []
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.team-detail {
		.table-box {
			margin: 24rpx 32rpx 0;
			box-sizing: border-box;
			position: relative;
			background: #FFFFFF;
			box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(0, 0, 0, 0.04);
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			padding: 20rpx 32rpx;

			.table-wrap {
				width: 100%;
				box-sizing: border-box;
				position: relative;
				height: fit-content;
				border: 2rpx solid #EDEDED;

				.table-row-item {
					display: flex;
					align-items: center;
					border-bottom: 2rpx solid #ededed;
					--text-color: #3E3E3E;
					--bg-color: #FFFFFF;

					&.is-header {
						--text-color: #FFFFFF;
						--bg-color: #3780F5;
					}

					&:last-child {
						border-bottom: 0;
					}

					.table-col-item {
						height: 90rpx;
						line-height: 90rpx;
						text-align: center;
						background: var(--bg-color);
						flex: 1;
						font-size: 28rpx;
						color: var(--text-color);
						border-right: 2rpx solid #ededed;

						&:last-child {
							border-right: 0;
						}
					}
				}
			}

			.table-title {
				font-weight: 400;
				font-size: 32rpx;
				color: #4A4A49;
				line-height: 44rpx;
				margin-bottom: 22rpx;
			}
		}

		.user-chart {
			margin: 0 32rpx;
			box-sizing: border-box;
			position: relative;
			padding: 32rpx 70rpx 28rpx;
			display: flex;
			align-items: center;
			flex-flow: row nowrap;
			background: #FFFFFF;
			box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(0, 0, 0, 0.04);
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			margin-top: -16rpx;

			.chart-item {
				display: flex;
				flex-flow: column;
				align-items: center;
				flex: 1;

				.item-line {
					width: 2rpx;
					height: 86rpx;
					background-color: #E3E3E3;
				}

				.chart-value {
					font-weight: bold;
					font-size: 30rpx;
					color: #606060;
					letter-spacing: 1px;
				}

				.chart-label {
					font-size: 24rpx;
					color: #606060;
					line-height: 40rpx;
					margin-top: 8rpx;

				}
			}
		}

		.header-wrap {
			width: 100%;
			box-sizing: border-box;
			position: relative;
			height: 506rpx;
			padding-top: var(--status-height-value);

			.userinfo-box {
				margin: 28rpx 32rpx 0;
				box-sizing: border-box;
				position: relative;
				padding: 28rpx 32rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(0, 0, 0, 0.04);
				border-radius: 44rpx 44rpx 44rpx 44rpx;
				display: flex;
				flex-flow: row nowrap;
				align-items: center;

				.user-avatar {
					width: 160rpx;
					height: 160rpx;
					border-radius: 50%;
				}

				.user-details {
					margin-left: 28rpx;
					display: flex;
					flex-flow: column;

					.user-desc-text {
						font-size: 28rpx;
						color: #565656;
						line-height: 44rpx;
					}

					.user-name {
						font-weight: bold;
						font-size: 28rpx;
						color: #565656;
						line-height: 44rpx;
					}
				}
			}


			.custom-navbar {
				display: flex;
				align-items: center;
				height: 88rpx;
				position: relative;
				padding: 0 36rpx;
				box-sizing: border-box;

				.back-icon {
					width: 48rpx;
					height: 48rpx;
				}

				.header-title {
					font-weight: bold;
					font-size: 32rpx;
					color: #FFFFFF;
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%, -50%);
				}
			}

			.header-img {
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
			}
		}
	}
</style>